<template>
  <div class="header">
    <div class="title">
      <span>文物信息管理及智能检索平台</span>
    </div>
    <div class="wenwu"><i class="iconfont icon-danganwenwu"></i></div>
    <div class="search">
      <input
        type="text"
        v-model="searchValue"
        placeholder="文物模糊搜索"
        @keyup.enter="handleEnterKey"
      />
      <i class="iconfont icon-sousuo"></i>
    </div>
    <div class="yonghu" @click="JumpPerson">
      <i class="iconfont icon-yonghu" v-if="!image"></i>
      <img class="headImage" v-else :src="getImageUrl(image)" />
      <span class="loginName">{{ username }}</span>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      searchValue: "",
      relicList: [],
    };
  },
  computed: {
    ...mapState("login", ["username", "image"]),
  },
  methods: {
    getImageUrl(imageName) {
      const prefix = this.$imagePrefix;
      console.log(prefix);
      return `${prefix}${imageName}`;
    },
    handleEnterKey() {
      this.$bus.$emit('searchRelic',this.searchValue)
      this.$router.push({ name: "list",query:{searchValue:this.searchValue}});
    },
    JumpPerson() {
      this.$router.push({ name: "personCollectionPage" });
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  background: rgba(42, 81, 77, 1);
  /* background: transparent; */
  height: 80px;
  position: sticky;
  top: 0;
  justify-content: flex-end;
  align-items: end;
  z-index: 1;
}
.title {
  display: inline-block;
  width: 450px;
  font-size: 30px;
  font-family: "楷体";
  color: #c1925b;
  height: 80px;
  line-height: 80px;
  text-align: center;
  flex-shrink: 0;
}
.wenwu {
  flex-grow: 1;
  line-height: 80px;
  height: 80px;
  vertical-align: middle;
  padding-top: 1px;
  text-align: center;
}
.yonghu {
  display: inline-block;
  width: 100px; /* 固定宽度为 200px */
  line-height: 40px;
  height: 80px;
  /* vertical-align: middle; */
  flex-shrink: 0;
  text-align: center;
  color: #fff;
  padding-top: 10px;
}
.loginName {
  display: block;
  font-size: 14px;
  width: 100px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  margin: 0px auto;
}
.icon-yonghu,
.icon-danganwenwu {
  color: #fff;
  font-size: 45px;
}
input {
  outline: none;
  border: none;
  background: #edeaea;
  width: 300px;
  line-height: 25px;
  padding: 5px;
  border-radius: 7px;
  color: #505050;
  font-size: 15px;
}
.search {
  position: relative;
  display: inline-block;
  width: 350px;
  line-height: 80px;
  height: 80px;
  vertical-align: middle;
  flex-shrink: 0;
  text-align: left;
}
.icon-sousuo {
  color: #bdbcbc;
  font-size: 30px;
  position: absolute;
  left: 260px;
}
.headImage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>